<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2986739_m1ci5w2fid.css">
    <link rel="stylesheet" href="../css/detail.css">
<<<<<<< HEAD
    <link rel="icon" href="../images/favicon.ico" type="images/x-icon">

=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
</head>

<body>
    <div class="allhead">
        <div class="head">
            <div class="head1">
                <span>你好，欢迎来到海澜之家！</span>
                <div class="head1son">
                    <a href="../html/login.html"><b>请登录</b></a>
                    <a href=""><b>合作账号登录</b>
                        <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-social-qq"></i>
                    </a>
                    <a href="../html/zhuce.html"><b>免费注册</b></a>
                </div>
                <div class="show">
                    <span class="show-phone">欢迎:</span>
                    <a href="" class="over">退出</a>
                </div>
            </div>
            <div class="head2">
                <div class="head2son">
                    <a href="" class="">我的海澜之家</a>
                    <a href="" class="">在线客服</a>
                    <a href="../html/cart.html" class="">我的购物袋</a>
                    <a href="" class="">帮助</a>
                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="nav">
            <div class="wrapson">
                <a href=""><span>附近门店</span></a>
            </div>
            <div class="wrap1son">
                <a href=""><img src="../images/1.png" alt=""></a>
            </div>
            <div class="wrap2son">
                <input type="text" class="sousuo">
                <a href=""><i class="iconfont icon-sousuo"></i></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <ul>
            <a href="">
                <li>首页</li>
            </a>
            <a href="../html/list.html">
                <li>2021夏季热卖</li>
            </a>
            <a href="../html/list.html">
                <li>明星同款</li>
            </a>
            <a href="../html/list.html">
                <li>IP联名</li>
            </a>
            <a href="../html/list.html">
                <li>国民臻品</li>
            </a>
            <a href="../html/list.html">
                <li>2021秋季新品</li>
            </a>
        </ul>
    </div>
    <div class="main">
        <!-- 版心 -->
        <div class="sub">
            <!-- 轮播放大镜 -->
            <div class="box">

                <div class="left">
                    <img class="bigImg" src="">
                    <div class="a"></div>
                </div>
                <ul class="theme">
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                </ul>

            </div>
            <div class="box1">
                <div class="right">
                    <img src="">
                </div>
                <h4 class="goods_title">H</h4>
                <p>商品编号:<span class="goods_des">HNTBJ2D036A</span></p>
                <div class="box1son-price">
                    <p>优惠价: <span class="goods_price">￥98.00</span></p>
                </div>
                <div class="box1son-size">
                    <span>尺码</span>
                    <ul>
                        <li class="on">
                            165/84A(46)
                        </li>
                        <li class="on">
                            170/88A(48)
                        </li>
                        <li class="on">
                            175/92A(50)
                        </li>
                        <li class="on">
                            180/96A(52)
                        </li>
                        <li class="on">
                            185/100A(54)
                        </li>
                        <li class="on">
                            190/104A(56)
                        </li>
                    </ul>
                </div>
                <div class="box1son-color">
                    <span>颜色分类</span>
                    <ul>
                        <li>
                            36
                        </li>
                    </ul>
                </div>
                <div class="box1son-num">
                    <span>数量</span>
                    <div class="count">
                        <span class="reduce off"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                        件
                    </div>
                </div>
                <div class="addcart">
                    <div class="buy">立即购买</div>
                    <div class="incart">加入购物车</div>
                </div>
                <div class="ser">
                    <span>服务承诺</span>
                    <span>正品保证</span>
                    <span>极速退款</span>
                    <span>七天无理由退换</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/api.js"></script>
<script>

<<<<<<< HEAD

    const phone = localStorage.getItem('phone');
    console.log(phone);
    if (phone) {
        $('.head1son').css({ 'display': 'none' }).removeClass()
        $('.show').css({ 'display': 'block' })
        $('.show-phone').eq(0).html(`欢迎您:${phone}`)
    }

    $('.over').on('click', function () {
        localStorage.removeItem('phone')
        location.reload();
    })









=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
    const search = location.search.split('?')[1];
    // console.log(search);
    const id = search.split('=')[1];
    console.log(id);

    async function AQ() {
        const res = await detail({
            id
        })
        console.log(res);
        const { status, msg, data } = res;
        let resl = data.smallimg.split(',')
        console.log(resl);
        $('.goods_title').html(data.title)
        $('.goods_des').html(data.des)
        $('.goods_price').html('￥' + data.price)
        $('.left img').attr('src', resl[0])
        $('.right img').attr('src', resl[0])
        $('.theme li img').each(function (i, v) {
            console.log($('.theme li img'));
            $(v).attr('src', resl[i])
        })
        $('.box').on('click', '.theme li img', function () {
            $('.left img').attr('src', this.src)
            $('.right img').attr('src', this.src);
        })

        //加入购物车
        let num = 1
        $('.incart').click(async function () {
            const phone = localStorage.getItem('phone');
            if (phone) {
                const res = await addToCart({
                    phone,
<<<<<<< HEAD
                    goods_id: id,
=======
                    goods_id:id,
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
                    num
                })
                const { status, msg } = res;
                console.log(res);
                // location.href = './cart.html'
                alert('加入成功')
            } else {
                alert('请先登录')
                location.href = '../html/login.html'
            }
        })

    }

    AQ()


    class Glass {
        constructor(ele) {
            this.ele = $(ele);
            this.oRight = this.ele.find('.right');
            this.oA = this.ele.find('.a');
            this.oLeft = this.ele.find('.left');
            this.oLeftImg = this.ele.find('.left img');
            this.oRightImg = this.ele.find('.right img');
            this.r = this.oA.outerWidth() / 2;
            this.maxX = this.oLeft.innerWidth() - this.oA.outerWidth();
            this.maxY = this.oLeft.innerHeight() - this.oA.outerHeight();
            this.oTheme = this.ele.find('.theme');
        }

        over() {
            this.ele.on('mouseover', '.left', () => {
                this.oA.css('display', 'block');
                this.oRight.css('display', 'block');
                this.ele.on('mousemove', '.left', (e) => {
                    let x = e.pageX - this.oLeft.offset().left - this.r;
                    let y = e.pageY - this.oLeft.offset().top - this.r;
                    if (x <= 0) x = 0;
                    if (y <= 0) y = 0;
                    if (x >= this.maxX) x = this.maxX;
                    if (y >= this.maxY) y = this.maxY;
                    this.oA.css({ 'left': x, 'top': y });
                    let maxX2 = this.oRightImg.width() - this.oRight.width();
                    const scale = maxX2 / this.maxX;
                    this.oRightImg.css({ 'left': -scale * x, 'top': -scale * y })
                })
            })
            this.ele.on('mouseout', '.left', () => {
                this.oA.css('display', 'none');
                this.oRight.css('display', 'none');
                this.ele.off('mousemove')
            })
        }
    }

    $('.on').on('click', function () {
        $(this).css('border-color', 'red').siblings().css('border-color', 'black')
    })

    $('.add').on('click', function () {
        let c = $(this).prev().val()
        $(this).prev().val(++c);

        if ($(this).prev().prev().hasClass('off')) {
            $(this).prev().prev().html('-');
            $(this).prev().prev().removeClass('off');
        }
    })

    $('.reduce').on('click', function () {
        if ($(this).html()) {
            let c = $(this).next().val();
            $(this).next().val(--c);

            if (c <= 1) {
                $(this).html('');
                $(this).addClass('off');
            }
        }
    })

    const v = new Glass('.sub');
    v.over()



</script>

</html>